<template>
  <div class="functional-dialog" :class="{ horizontal: config.horizontal }">
    <div class="wrap" :class="{ hide: !show, show }">
      <div class="mask"></div>
      <div class="content">
        <div class="row-1">
          <template v-if="config.iconType">
            <img v-if="config.iconType == 'warning'" src="/assets/sigh-bold.png" alt="" />
            <img v-if="config.iconType == 'error'" src="/assets/close-bold.png" alt="" />
          </template>
          {{ config.title }}
        </div>
        <div class="row-2" v-html="config.text"></div>
        <div class="row-3 row-ok" @click="confirm">{{ config.confirmButtonText }}</div>
        <div class="row-3 row-close" @click="close" v-if="config.cancelButtonText">{{ config.cancelButtonText }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, nextTick, onMounted, ref } from 'vue'

//自定义函数组件无法使用全局组件，需要单独引入
const props = defineProps({
  config: {
    type: Object,
    default: () => {},
  },
  remove: {
    type: Function, //传入移除节点方法,这里是createApp中的方法
    default: null,
  },
})

let show = ref(false) // 为了弹窗有动画的的效果
onMounted(() => {
  setTimeout(() => {
    show.value = true
  }, 0)
})

function close() {
  show.value = false
  // 动画完成后移除元素
  setTimeout(() => {
    props.remove()
  }, 500)
}

function confirm() {
  typeof props.config.confirmCallback === 'function' && props.config.confirmCallback()
  close()
}
</script>

<style scoped lang="scss">
.functional-dialog {
  .wrap {
    transition: all var(--transition-time);
  }
  .show {
    opacity: 1;
  }
  .hide {
    opacity: 0;
  }
  .mask {
    top: 0;
    left: 0;
    position: fixed;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .content {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: fixed;
    z-index: 2000;
    width: 343px;
    padding: 20px 16px 16px 16px;
    color: black;
    box-sizing: border-box;
    background-color: white;
    .row-1 {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 700;
      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        display: block;
      }
    }
    .row-2 {
      margin-top: 8px;
      font-size: 14px;
      font-weight: 400;
    }
    .row-3 {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 700;
      height: 44px;
      border-radius: 5px;
    }
    .row-ok {
      margin-top: 24px;
      color: white;
      background-color: black;
    }
    .row-close {
      color: black;
      background-color: white;
    }
  }
}

.horizontal {
  .content {
    transform: translate(-50%, -50%) rotate(90deg);
  }
}
</style>
